<script lang="ts" setup>
import useRefModel from "@/hooks/useRefModel";

defineOptions({
  name: "LotTabs",
});

const props = defineProps({
  tabOptions: {
    type: Array as () => { title: string; name: string }[],
    default: () => [],
  },
  activeName: {
    type: String,
    default: "chkRes",
  },
});
const emit = defineEmits(["changeTab", "update:activeName"]);
const activeName = useRefModel(props, "activeName", emit);
const getActiveStyle = (index: number, name: string) => {
  return name === activeName.value
    ? "after:content-[''] after:inline-block after:h-3 after:w-34 after:absolute after:bottom-[-5px] after:left-[50%] after:translate-x-[-50%] after:bg-#FFD931 after:rounded-3"
    : "";
};

const capitalizeFirstLetter = (str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

function handleClick(index: number, name: string, event: Event) {
  const capitalized_name = capitalizeFirstLetter(name);
  activeName.value = capitalized_name;
  const target = event.target as HTMLElement;
  target.scrollIntoView({ behavior: "smooth", inline: "center" });
  emit("changeTab", { index, name: capitalized_name, event });
}
</script>
<template>
  <div
    class="w-full h-50 flex justify-start items-center gap-x-12 overflow-x-scroll whitespace-nowrap"
  >
    <div
      v-for="({ title, name }, index) in tabOptions"
      :key="index"
      class="font-bold text-16 color-#fff lh-19 text-center not-italic first-of-type:ml-14 last-of-type:mr-14 relative"
      :class="getActiveStyle(index, name)"
      @click="handleClick(index, name, $event)"
    >
      {{ title }}
    </div>
  </div>
</template>
